<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>完善个人信息</title>
    <script type="text/javascript" src="${ctx}/static/js/jsAddress.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/upload.js"></script>
    <script type="text/javascript">
        var qntoken = "";
        $.getJSON("${ctx}/api/common/qiniu/token", function (json) {
            qntoken = json.data.token;
        });

        //上传图片
        function uploadOne() {
            QiniuUpload({
                prefix: "volunteer_",
                token: qntoken,
                successBack: function (json) {
                    if (json.key) {
                        var v = "http://img.dakaqi.cn/" + json.key
                        $("#cardImgOne").val(v);
                        $("#oneShow").attr("src", v);
                    } else {
                        alert("上传图片出错！");
                    }
                }
            });
        }
        //上传图片
        function uploadTwo() {
            QiniuUpload({
                prefix: "volunteer_",
                token: qntoken,
                successBack: function (json) {
                    if (json.key) {
                        var v = "http://img.dakaqi.cn/" + json.key
                        $("#cardImgTwo").val(v);
                        $("#twoShow").attr("src", v);
                    } else {
                        alert("上传图片出错！");
                    }
                }
            });
        }
    </script>
</head>
<div class="content">
    <c:if test="${not empty message}">
        <div class="alert alert-success alert-dismissable" style="text-align: center;">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
            </button>
            ${message}
        </div>
    </c:if>

    <form id="inputForm" action="${ctx}/settings/certification" method="post" class="form-horizontal">
        <input type="hidden" id="id" name="id" value="${volunteer.id}">
        <input type="hidden" id="memberCode" name="memberCode value="${volunteer.memberCode}">
        <div class="form-group">

            <!--
            <div class="form-item">
                <label for="">证件正面照片</label>

                <div class="form-item-image-upload">
                    <div class="image-preview-box">
                            <img alt="" src="${ctx}/static/assets/160x160.png" onclick="uploadOne();" id="oneShow">
                    </div>
                    <input id="cardImgOne" type="hidden" name="cardImgOne" value=""/>

                    <p class="help-block">你可以上传 JPG、JPEG、GIF、PNG 或 BMP 文件。</p>
                </div>
            </div>
            <div class="form-item">
                <label for="">证件背面照片</label>

                <div class="form-item-image-upload">
                    <div class="image-preview-box">
                            <img alt="" src="${ctx}/static/assets/160x160.png" onclick="uploadTwo();" id="twoShow">
                    </div>
                    <input id="cardImgTwo" type="hidden" name="cardImgTwo" value=""/>

                    <p class="help-block">你可以上传 JPG、JPEG、GIF、PNG 或 BMP 文件。</p>
                </div>
            </div>
        </div>
        -->
            <h3 class="item-title">个人信息</h3>

            <div class="form-item">
                <label for="">姓名</label>
                <input type="text" class="form-control" id="realName" name="realName" value="${volunteer.realName}"
                       placeholder="" required="">
            </div>
            <div class="form-item">
                <label for="">昵称</label>
                <input type="text" class="form-control" id="nickName" name="nickName" value="${volunteer.nickName}"
                       placeholder="" required="">
            </div>
            <div class="form-item form-item-1-3">
                <label for="">居住地</label>
                <select class="form-control" id="cmbProvince" name="province"></select>
                <select class="form-control" id="cmbCity" name="city"></select>
                <select class="form-control" id="cmbArea" name="district"></select>
                <script type="text/javascript">
                    addressInit('cmbProvince', 'cmbCity', 'cmbArea', '${volunteer.province}', '${volunteer.city}', '${volunteer.district}');
                </script>
            </div>

            <div class="form-item">
                <label for="">证件类型</label>
                <select class="form-control" name="cardType">
                    <c:forEach items="${cardType}" var="skill">
                        <option value="${skill.code}">${skill.name}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="form-item">
                <label for="">证件号</label>
                <input type="text" class="form-control" id="cardNO" name="cardNO" value="${volunteer.cardNO}" placeholder="" required="">
            </div>

            <h3 class="item-title">志愿服务信息</h3>

            <div class="form-item">
                <label class="form-item-title" for="">职业</label>
                <c:forEach items="${userJob}" var="skill">
                    <div class="radio radio-item">
                        <c:if test="${volunteer.job.contains(skill.name)}">
                            <label><input type="radio" name="job" value="${skill.name}" checked>${skill.name}</label>
                        </c:if>
                        <c:if test="${!volunteer.job.contains(skill.name)}">
                            <label><input type="radio" name="job" value="${skill.name}">${skill.name}</label>
                        </c:if>
                    </div>
                </c:forEach>

            </div>
            <div class="form-item">
                <label class="form-item-title" for="">专业技能</label>
                <c:forEach items="${userSkill}" var="skill">
                    <div class="checkbox checkbox-item">
                        <c:if test="${volunteer.skill.contains(skill.name)}">
                            <label><input type="checkbox" name="skill" value="${skill.name}" checked>${skill.name}
                            </label>
                        </c:if>
                        <c:if test="${!volunteer.skill.contains(skill.name)}">
                            <label><input type="checkbox" name="skill" value="${skill.name}">${skill.name}</label>
                        </c:if>
                    </div>
                </c:forEach>

            </div>
            <div class="form-item">
                <label class="form-item-title" for="">意向服务领域</label>
                <c:forEach items="${userServiceFiled}" var="skill">
                    <div class="checkbox checkbox-item">
                        <c:if test="${volunteer.serviceField.contains(skill.name)}">
                            <label><input type="checkbox" name="serviceField" value="${skill.name}"
                                          checked>${skill.name}</label>
                        </c:if>
                        <c:if test="${!volunteer.serviceField.contains(skill.name)}">
                            <label><input type="checkbox" name="serviceField" value="${skill.name}">${skill.name}
                            </label>
                        </c:if>
                    </div>
                </c:forEach>
            </div>
        <div>
            <button class="btn">提交</button>
        </div>
    </form>
</div>
</div>
</body>
</html>
